<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :header-right="headerRight"></xcl-header>
<div class="content">
	<div class="list-block" style="margin:0.5rem 0">
	    <ul>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">昵称</div>
	            <div class="item-input">
	              <input type="text" autofocus="autofocus" maxlength="20" v-model="user.nickName" placeholder='2～20位字符，可包含中文、字母、数字、"-"、"_"'>
	            </div>
	          </div>
	        </div>
	      </li>
	    </ul>
  	</div>
  	<div class="content-block">
		<button :class="['button','button-fill','btn-style',forbidenLogin ? 'disabled':'']"  @click="login" @keyup.enter="login">{{submitText}}</button>
	</div>
</div>
 <xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>
  </div>
</template>
<script>
import {getCheck,ERROR_DEFINE}  from '../libs/utils'
import xclHeader from '../components/header.vue'
import xclToast from '../components/xclToast.vue'
let UserProxy =  require("../proxy/user_proxy");
let User = new UserProxy();
export default {
    data (){
        return {
            scroll:true,
            pageTitle:'修改昵称',
            submitText:'确定',
            submitting:false,
            headerRight:'', 
            user:{
            	nickName:localStorage.nickName
            },
            toast:{
            	show:false,
            	content:''
            }
        }
    },
    computed:{
    	forbidenLogin(){
    		if(!this.user.nickName){
    			return true;
    		}else if(this.user.nickName.trim() == localStorage.nickName) {
    			return true;
    		}else if(!getCheck.checkNickName(this.user.nickName)){
    			return true;
    		}else if(this.submitting){
                return true;
            }else{
    			return false;
    		}
    	}
    },
    ready(){
    	//this.$els.nk.focus();
    },
    methods:{
    	login(){
    		var _this = this;
    		if(_this.forbidenLogin)return;
    		var nickName = _this.user.nickName;
            _this.submitting = true;
            _this.submitText = '提交中...';
    		User.modifyNickName(localStorage.token,nickName,(d)=>{
    			if(d.code == 200){
    				localStorage.nickName = nickName;
    				_this.toast = {show:true,content:'昵称修改成功'};
                    setTimeout(()=>{
                    	_this.toast.show = false;
                    	_this.$route.router.go('/User/Setting');
                    },2800);
    			}else if(d.code == 4090){
                      localStorage.removeItem('token');
                      _this.$router.go('/Login'); 
                }
    		});
    	}
    },
    components:{
       "xclHeader":xclHeader,
       "xclToast":xclToast
    }
}
</script>